<template>
  <div class="search_box">
    <!-- <div class="bg"> -->

      <div class="search_box_list">
        <!-- <el-button  size="mini" @click="back()" icon="el-icon-arrow-left">返回上一页</el-button>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; -->
        <!-- <br> -->
        <!-- <br> -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="具体信息">
            <el-input v-model="formInline.keyword" placeholder="请输入具体信息"></el-input>
          </el-form-item>
          <el-form-item label="评论类别">
            <el-select v-model="formInline.sentiment" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="好评" value="好"></el-option>
              <el-option label="中评" value="中"></el-option>
              <el-option label="差评" value="不好"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_box">
          <el-table :data="tableData.slice((page - 1) * limit, page * limit)"  style="width: 100%; height:90%;" max-height="550">
            <el-table-column fixed prop="school" label="学校" width="150"></el-table-column>
            <el-table-column prop="postUserIP" label="地址" width="120"></el-table-column>
            <el-table-column prop="title" label="标题" width="300"></el-table-column>
            <el-table-column prop="commentContent" label="内容" width="500"></el-table-column>
            <!-- <el-table-column prop="city" label="市区" width="120"></el-table-column> -->
            <!-- <el-table-column prop="zip" label="邮编" width="120"></el-table-column> -->
            <el-table-column label="来源" width="120">
              <template slot-scope="scope">
                <el-button
                  @click = gotoPage(scope.row.postAddress)
                  type="text"
                  size="small"
                >查询信息</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <span class="demonstration">完整功能</span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              :total=totalCount
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
import qs from 'qs';
export default {
  data() {
    return {
      formInline: {
        keyword : "",
        sentiment : "",
        pageNo : 1,
        pageSize: 10
      },
      limit: 5,
      page: 1,
      tableData: [],
      currentPage: 1,
      totalCount:0
    };
  },
  computed: {
    TableDatatoal() {
      return this.tableData.length;
    }
  },
  methods: {
    async searchList(){
      const searchData = {keyword:this.formInline.keyword,pageNo:this.formInline.pageNo,pageSize:this.formInline.pageSize,sentiment:this.formInline.sentiment};
      const response = await this.$http.post('/comments/search',qs.stringify(searchData))
      if(response.status == 200){
        this.tableData = response.data;
      }
    },
    async getTotalCount(){
      const searchData = {keyword:this.formInline.keyword,pageNo:this.formInline.pageNo,pageSize:this.formInline.pageSize,sentiment:this.formInline.sentiment};
      const response = await this.$http.post('/comments/totalCount',qs.stringify(searchData))
      if(response.status == 200){
        this.totalCount = response.data;
      }
    },
    onSubmit() {
      console.log("submit!")
      this.getTotalCount()
      this.searchList()
    },
    deleteRow(index, rows) {
      // rows.splice(index, 1);
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.searchList()
    },
    handleCurrentChange(val) {
      this.formInline.pageNo = val;
      this.searchList()
    },
    back() {
      this.$router.go(-1)
      // console.log(`当前页: ${val}`);
    },
    gotoPage(url){
      window.location.href = url;
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    CurrentChange(val) {
      this.page = val;
    },
  }
};
</script>

<style lang="scss" scoped>
// @import "../assets/scss/search.scss";
.search_box {
  width: 100%;
  height: 95%;
  margin: 0 auto;
  background-color: rgb(255, 255, 255,0.8);
  margin-top: 10px;
  padding: 20px;
    border-radius: 10px;
  // overflow: hidden;
  overflow-y: auto;
}
</style>